<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分类列表</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <style>
        .layui-table-cell{
            height: auto;
        }
    </style>
</head>
<body>
<blockquote class="layui-elem-quote">分类列表</blockquote>
<form class="layui-form layui-form-pane">
    <div class="layui-form-item">

        <div class="layui-inline">
            <label class="layui-form-label">分类列名</label>
            <div class="layui-input-inline">
                <input class="layui-input" name="name">
            </div>
        </div>

        <div class="layui-inline">
            <label class="layui-form-label">描述</label>
            <div class="layui-input-inline">
                <input class="layui-input" name="dscp">
            </div>
        </div>

        <div class="layui-inline">
            <label class="layui-form-label">上级分类</label>
            <div class="layui-input-inline">
                <select name="parentId"></select>
            </div>
        </div>

        <div class="layui-inline">
            <label class="layui-form-label">首页推荐</label>
            <div class="layui-input-inline">
                <select name="recom">
                    <option value="">不限</option>
                    <option value="0">不推荐</option>
                    <option value="1">推荐</option>
                </select>
            </div>
        </div>

        <div class="layui-inline">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-inline">
                <select name="status">
                    <option value="">不限</option>
                    <option value="0">上架</option>
                    <option value="1">下架</option>
                </select>
            </div>
        </div>

        <div class="layui-inline">
            <div class="layui-input-inline">
                <button class="layui-btn layui-bg-blue" lay-submit lay-filter="search">
                    <i class="layui-icon layui-icon-search"></i>
                </button>
            </div>
        </div>
    </div>
</form>

<table id="category-list" lay-filter="category-list"></table>

<script type="text/html" id="toolbar">
    <a class="layui-btn layui-btn-sm" lay-event="add">
        <i class="layui-icon layui-icon-addition"></i>
    </a>
</script>

<script type="text/html" id="bar">
    <a class="layui-btn layui-btn-sm" lay-event="edit">编辑</a>
    {{# if (d.status==1){ }}
    <a class="layui-btn layui-btn-sm layui-bg-blue" lay-event="up">上架</a>
    {{# } else { }}
    <a class="layui-btn layui-btn-sm layui-bg-red" lay-event="down">下架</a>
    {{# } }}
</script>

<script src="/layui/layui.js"></script>
<script>
    layui.use(['form', 'table'], () => {
        const form = layui.form;
        const table = layui.table;
        const $ = layui.$;

        //初始化分类
        getFirstCategory();

        //渲染表格
        table.render({
            elem: '#category-list',//id选择器
            url: '/category/search',//数据来源
            page: 'true',//打开分页
            toolbar: '#toolbar',
            cols: [[//js的二级数组
                {type: 'checkbox'},
                {title: 'ID', field: 'id'},
                {title: '分类名', field: 'name'},
                {title: '描述', field: 'dscp'},
                {
                    title: '图片', templet(d) {
                        return d.pic ? '<img src="/upload/' + d.pic + '">' : '';
                    }
                },
                {title: '上级分类', field: 'parentName'},
                {
                    title: '首页推荐', templet(d) {
                        return ['不推荐', '推荐'][d.recom];
                    }
                },
                {
                    title: '状态', templet(d) {
                        return ['上架', '下架'][d.status];
                    }
                },
                {title: '操作',toolbar: '#bar'},
            ]],
            parseData(result) {
                return {
                    code: result.code,
                    msg: result.msg,
                    count: result.data ? result.data.total : 0,
                    data: result.data ? result.data.list : null,
                };
            }
        });

        //搜索功能
        form.on('submit(search)',(data)=>{
            table.reloadData('category-list',{
               where: data.field,
               page: {curr: 1},
            });
            return false;
        });

        //获取一级分类的方法
        function getFirstCategory(){
            $.ajax({
                url: '/category/search',
                data: {parentId: 0},
                dataType: 'json',
                success(result){
                    //遍历查询结果
                    var html = '<option value="">请选择父分类</option>';
                    $.each(result.data, (index,category)=>{
                        html += '<option value="'+category.id+'">'+category.name+'</option>';
                    });
                    $('select[name="parentId"]').html(html);
                    form.render();
                },
                error(){
                    layer.msg('请求失败', {icon: 5});
                }

            });
        }

        //表格工具事件 lay-filter属性
        table.on('toolbar(category-list)', (obj) => {
            if (obj.event == 'add') {
                addCategory();
            }
        });

        //表格的行工具事件
        table.on('tool(category-list)', (obj) => {
            if (obj.event == 'edit') {
                // openEdit(obj.data);
            } else if (obj.event == 'up') {
                //上架
                enable(obj.data);
            } else if (obj.event == 'down') {
                //下架
                disable(obj.data);
            }
        });

        //禁用
        function disable(category) {
            layer.confirm('确定要下架当前商品吗？', function (index) {
                layer.close(index);
                edit({id: category.id, status: 1});
            })

        }

        //启用
        function enable(category) {
            layer.confirm('确定要上架当前商品吗？', function (index) {
                layer.close(index);
                edit({id: category.id, status: 0});
            })
        }

        function edit(category) {
            $.ajax({
                url: '/category/update',
                data: category,
                type: 'post',
                dataType: 'json',
                success(result) {
                    if (result.code == 0) {
                        layer.msg('操作成功！', {icon: 6});
                    } else {
                        layer.msg(result.msg, {icon: 5});
                    }
                    //刷新表格
                    table.reloadData('category-list');
                },
                error() {
                    layer.msg('请求失败', {icon: 5});
                }
            });
        }

        //添加
        function addCategory() {
            layer.open({
                title: '录入分类信息',
                type: 2,
                area: ['500px', '580px'],
                content:'/html/category/add.html',
                end(){
                    table.reloadData("category-list");//表格的ID
                }
            });
        }
    });
</script>
</body>
</html>